<template>
  <div>
    <span>{{$store.state.userInfo.msg}}</span>
    <el-carousel :interval="4000" type="card" height="360px" style="margin: 40px 150px 0px 150px">
      <el-carousel-item v-for="item in imgList" :key="item.id">
        <img :src=item.url  height="360px" alt="">
      </el-carousel-item>
    </el-carousel>
    <h2 style="text-align: center;font-size: 35px"> 今 / 日 / 推 / 荐 </h2>
    <div class="demo-image__placeholder" style="margin-left: 150px">
      <div class="block">
        <el-image v-for="item in img1" :key="item.id" :src=item.url  style="width: 250px; height: 375px;margin-right: 25px"></el-image>
      </div>
    </div>
    <h2 style="text-align: center;font-size: 35px"> 风 / 格 / 聚 / 焦 </h2>
      <el-carousel height="376px" style="margin: 0px 0px 0px 150px;width: 32%">
        <el-carousel-item v-for="item in img2" :key="item.id">
          <img :src=item.url alt="">
        </el-carousel-item>
      </el-carousel>
    <div style="position: absolute;left: 43%;top:140.5%">
      <el-image v-for="item in img3" :key="item.id" :src=item.url  style="width: 250px; height: 375px;margin-right: 25px"></el-image>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data(){
    return{
      imgList:[
        {
          id: '1',
          url: 'https://img30.360buyimg.com/babel/s1980x750_jfs/t1/188036/30/8871/184519/60cc053fE20ea0d6d/63ec82301be9c2b8.png!cc_1980x750'
        },
        {
          id: '2',
          url: 'https://img14.360buyimg.com/da/jfs/t1/59402/20/5415/153057/5d37b3f4E565eee1d/b3818446414de902.jpg',
        },
        {
          id: '3',
          url: 'https://img11.360buyimg.com/babel/s1900x740_jfs/t1/187478/29/15545/198611/61020f41E8fe34de5/567a68088b6f7bc4.jpg!cc_1900x740',
        },
        {
          id: '4',
          url: 'https://img14.360buyimg.com/babel/s1900x740_jfs/t1/200228/6/148/194717/610115b4Ead6072ba/e28949fda23b8020.jpg!cc_1900x740',
        },
        {
          id: '5',
          url: 'https://img13.360buyimg.com/da/jfs/t1/167136/40/4955/119012/6017d917E83be8cab/e96e82d3b9bbffbc.jpg',
        },
      ],
      img1:[
        {
          id: '1',
          url: 'https://img11.360buyimg.com/babel/jfs/t1/184192/28/17125/119454/61075d50E5fd811db/f09c2dc890a5fe86.jpg'
        },
        {
          id: '2',
          url: 'https://img14.360buyimg.com/babel/jfs/t1/197936/17/193/48675/6100b2b9E5660f763/1092bd4694d37c34.jpg',
        },
        {
          id: '3',
          url: 'https://img14.360buyimg.com/babel/jfs/t1/179035/32/9843/139260/60cc051eE5bb7803a/8d84682bc94e71a5.png',
        },
        {
          id: '4',
          url: 'https://img14.360buyimg.com/babel/jfs/t1/184197/37/16268/48012/61025713E8f9f907a/70c9b9c7477c3f5c.jpg',
        },
        {
          id: '5',
          url: 'https://img11.360buyimg.com/babel/jfs/t1/172117/23/483/82085/605d61b0E6a5c8de2/9e1197724460033a.jpg',
        },
      ],
      img2:[
        {
          id: '1',
          url: 'https://img30.360buyimg.com/babel/s1980x750_jfs/t1/188036/30/8871/184519/60cc053fE20ea0d6d/63ec82301be9c2b8.png!cc_1980x750'
        },
        {
          id: '2',
          url: 'https://img14.360buyimg.com/da/jfs/t1/59402/20/5415/153057/5d37b3f4E565eee1d/b3818446414de902.jpg',
        },
        {
          id: '3',
          url: 'https://img11.360buyimg.com/babel/s1900x740_jfs/t1/187478/29/15545/198611/61020f41E8fe34de5/567a68088b6f7bc4.jpg!cc_1900x740',
        }
      ],
      img3:[
        {
          id: '1',
          url: 'https://img11.360buyimg.com/babel/jfs/t1/184192/28/17125/119454/61075d50E5fd811db/f09c2dc890a5fe86.jpg'
        },
        {
          id: '2',
          url: 'https://img14.360buyimg.com/babel/jfs/t1/197936/17/193/48675/6100b2b9E5660f763/1092bd4694d37c34.jpg',
        },
        {
          id: '3',
          url: 'https://img14.360buyimg.com/babel/jfs/t1/179035/32/9843/139260/60cc051eE5bb7803a/8d84682bc94e71a5.png',
        }
      ],
  }
},
  created() {
    this.$store.dispatch('GET_USERINFO_ACTIONS');
  }
}
</script>

<style>

</style>